<template>
	<div>
        <span class="star active" v-for="s in num"></span> 
        <span v-if="clickable">
             <span class="star" v-for="(s,i) in (5-num)"
             @click="clickStar(i)"></span>
        </span> 
    </div>
</template>
<script>
export default{
	name:'Stars',
    model: {
	   prop: 'num',
	   event: 'change'
	 },
    methods:{
        clickNum(i){
            this.activeNum = this.activeNum + i + 1
            this.$emit('change', num)
        }
    },
    props: ['num', 'clickable']
}
</script>
<style lang='less' scoped>
.star{
    width: .3rem;
    height: .3rem;;
    background: url(../assets/img/common/star.png) center no-repeat;
    background-size: 100%;
    margin-right: 3px;
    display: inline-block;
}
</style>